<template>
  <div class="tags-container">
    <!-- tag盒子 -->
    <div class="tags-box" ref="tagBox">
      <div class="tags-list" ref="tagsList" @mousewheel="hadelMousewheel">
        <div ref="tagsPageOpened" class="tag-item" :class="{'is-active':item.close}" :name="item.value" v-for="(item,index) in tagList" :key="index" @click="openUrl(item)">
          <i class="iconfont icon-7 indexIcon" v-if="index == 0"></i>
          <span class="tag-text">{{item.label}}</span>
          <i class="el-icon-close" @click.stop="closeTag(item)" v-if="index !== 0"></i>
        </div>
      </div>
      <div class="pull-right tags-menuBox">
        <div class="refresh pull-left" @click="refreshThisPage">
          <i class="iconfont">&#xe647;</i>
        </div>
        <el-dropdown class="tags-menu pull-left" trigger="hover">
          <i class="el-icon-close tagsMore"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="closeCurrentTags">关闭当前</el-dropdown-item>
            <el-dropdown-item @click.native="closeOthersTags">关闭其他</el-dropdown-item>
            <el-dropdown-item @click.native="closeAllTags">关闭全部</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  inject: ['reload'],
  data() {
    return {
      tagBodyLeft: 0,
    };
  },
  computed: {
    ...mapState({
      tagList: state => state.tag.tagList,
      tagCurrent: state => state.tag.tagCurrent,
      menuList: state => state.common.menuList,
      defaultItem: state => state.tag.defaultItem,
    })
  },
  watch: {
    tagCurrent() {
      this.$nextTick(() => {
        this.init();
      });
    },
    tagBodyLeft(value) {
      this.$refs.tagsList.style.left = value + "px";
    },
  },
  methods: {
    refreshThisPage() {
      // if (sessionStorage.getItem('reloadCooling')) {
      //   this.$message({ message: "请勿重复刷新！", type: "warning" });
      //   return false
      // }
      // sessionStorage.setItem('reloadCooling', true)
      // setTimeout(() => {
      //   sessionStorage.removeItem('reloadCooling')
      // }, 3000)
      // 
      this.reload();
    },

    init() {
      this.refsTag = this.$refs.tagsPageOpened;
      if (this.refsTag) {
        setTimeout(() => {
          this.refsTag.forEach((item, index) => {
            if (this.tagCurrent.value === item.attributes.name.value) {
              let tag = this.refsTag[index];
              this.moveToView(tag);
            }
          });
        }, 1);
      }
    },

    openUrl(item) {
      if (item.value === this.tagCurrent.value) {
        return;
      }
      this.menuList.map(Item => {
        if (Item.name == item.label) {
          this.$store.dispatch('GetActionId', Item.id);
        }
        if (Item.name === '系统管理') {
          Item.Children.map(ChildrenItem => {
            if (ChildrenItem.name == item.label) {
              this.$store.dispatch('GetActionId', ChildrenItem.id);
            }
          });
        }
      });
      this.$router.push({ path: item.value, query: item.query });
    },

    hadelMousewheel(e) {
      const step = 0.8 * 100; // 一个tag长度
      const boundarystart = 0;
      const boundaryend = this.$refs.tagsList.offsetWidth - this.$refs.tagBox.offsetWidth + 100;
      // Y>0向左滑动
      if (e.deltaY > 0 && this.tagBodyLeft >= -boundaryend) {
        this.tagBodyLeft = this.tagBodyLeft - step;
        // Y<0向右滑动
      } else if (e.deltaY < 0 && this.tagBodyLeft < boundarystart) {
        this.tagBodyLeft = this.tagBodyLeft + step;
      }
    },

    moveToView(tag) {
      if (tag.offsetLeft < -this.tagBodyLeft) {
        // 标签在可视区域左侧
        this.tagBodyLeft = -tag.offsetLeft + 10;
      } else if (
        tag.offsetLeft + 10 > -this.tagBodyLeft &&
        tag.offsetLeft + tag.offsetWidth <
        -this.tagBodyLeft + this.$refs.tagBox.offsetWidth
      ) {
        // 标签在可视区域
      } else {
        // 标签在可视区域右侧
        this.tagBodyLeft = -(tag.offsetLeft - (this.$refs.tagBox.offsetWidth - 100 - tag.offsetWidth) + 20);
      }
    },

    eachTag(tag) {
      for (var key in this.tagList) {
        if (this.tagList[key].value === tag.value) {
          return key;
        }
      }
      return -1;
    },

    closeTag(item) {
      const key = this.eachTag(item);
      // if (key == "0") {
      //   this.closeAllTags()
      //   return false;
      // }
      let tag;
      this.$store.commit('DEL_TAG', item);
      if (item.value === this.tagCurrent.value) {
        tag = this.tagList[key === '0' ? key : key - 1];
        this.openUrl(tag);
      }
    },

    closeCurrentTags() { // 关闭当前tags
      let item = this.tagCurrent;
      let tagKey = this.eachTag(item);
      if (tagKey == "0") {
        this.closeAllTags();
        return false;
      }
      let tag;
      this.$store.commit("DEL_TAG", item);
      if (item.value === this.tagCurrent.value) {
        tag = this.tagList[tagKey === 0 ? tagKey : tagKey - 1];
        this.openUrl(tag);
      }
    },

    closeOthersTags() {
      if (this.$store.state.tag.tagList.length !== 1) {
        this.$store.commit('DEL_TAG_OTHER');
      }
    },

    closeAllTags() {
      this.tagBodyLeft = 0; // 重置tags左边距
      this.$store.commit('DEL_ALL_TAG');
      this.$router.push({
        path: this.defaultItem.request || this.defaultItem.Children[0].request
      });
      this.$store.dispatch('GetActionId', this.defaultItem.id || this.defaultItem.Children[0].id);
    }
  },
  mounted() {
    this.init();
  }
};
</script>
<style lang="less">
.tags-breadcrumb {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 50px;
}
.tags-breadcrumb-list {
  padding: 0 15px;
}
.tag-collapse {
  font-size: 36px !important;
}
.tag-collapse.tag-collapse_right {
  transform: rotate(90deg);
}
.tags-container {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  box-sizing: border-box;
  .tags-box {
    position: relative;
    box-sizing: border-box;
    padding-right: 106px;
    width: 100%;
    background: #ffffff;
    border-left: 1px solid #eeeeee;
    .tags-menuBox {
      background: #fff;
      box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      .refresh {
        padding: 0 15px;
        height: 100%;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        border-right: 1px solid #eeeeee;
        .iconfont {
          font-size: 20px;
          color: #31a2f2;
          cursor: pointer;
          &:hover {
            transform: rotate(360deg);
            transition: 0.6s;
          }
        }
      }
      .tags-menu {
        display: flex;
        align-items: center;
        padding: 0 15px;
        height: 100%;
        box-sizing: border-box;
        .tagsMore {
          font-size: 18px;
          color: #ffffff;
          background: #31a2f2;
          border-radius: 50%;
          //  width: 23px;
          text-align: center;
          //  height: 23px;
          padding: 2px;
          margin-right: 7px;
          transition: transform 0.3s;
          cursor: pointer;
          &:hover {
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            transition: transform 0.3s;
          }
        }
      }
    }
  }
  .tags-list {
    position: absolute;
    padding-right: 10px;
    height: 100%;
    overflow: visible;
    white-space: nowrap;
    transition: left 0.3s ease;
    .indexIcon {
      position: relative;
      top: 1px;
      right: -2px;
    }
  }
  .tag-item-icon {
    color: #eee;
    font-size: 11px !important;
  }
  .tag-item {
    position: relative;
    display: inline-block;
    margin: 0px 4px 0px 0;
    padding: 0 10px;
    color: #333333;
    font-size: 14px;
    vertical-align: middle;
    opacity: 1;
    overflow: hidden;
    cursor: pointer;
    animation: tag 800ms ease;
    box-sizing: border-box;
    &.is-active {
      .tag-item-icon {
        color: #fff;
      }
      border-bottom: 3px solid #39a4ed;
    }
    &:hover {
      border-bottom: 3px solid #39a4ed;
    }
  }
  .tag-text {
    padding: 0px 8px;
  }
  .tag-close {
    margin-left: 8px;
  }
  .tag-item:hover {
    opacity: 0.85;
  }
}
// .contextmenu {
//   margin: 0;
//   background: #fff;
//   top:64px;
//   list-style-type: none;
//   padding: 5px 0;
//   border-radius: 4px;
//   font-size: 12px;
//   font-weight: 400;
//   color: #333;
//   box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
//   li {
//     margin: 0;
//     height: 32px;
//     line-height: 32px;
//     padding: 0 15px;
//     cursor: pointer;
//     &:hover {
//       background: #eee;
//     }
//   }
// }
</style>
